<template>
  <div class="dialog">
    <el-dialog
      :title="isBatch?'批量结算':'确认结算'"
      :visible.sync="centerDialogVisible"
      width="400px"
      :close-on-click-modal="false"
    >
      <el-form 
      :model="formData" 
      ref="form"
      :rules="rules"
      v-if="!batchType"
      >
        <el-form-item label="结算周期:" :label-width="formLabelWidth">
          <span v-if="isBatch">{{dateFormat(minDate[0],'yyyy-MM-dd')}}至{{dateFormat(maxDate[maxDate.length-1],'yyyy-MM-dd')}}</span>
          <span v-else>{{dateFormat(row.startat,'yyyy-MM-dd')}}至{{dateFormat(row.endat,'yyyy-MM-dd')}}</span>
        </el-form-item>
        <el-form-item label="分成金额:" :label-width="formLabelWidth">
          <span v-if="isBatch" style="color:#E02020">{{checkMoney}}</span>
          <span v-else style="color:#E02020">{{row.money}}</span>元
        </el-form-item>
        <el-form-item v-if="isBatch" label="结算笔数:" :label-width="formLabelWidth">
          <span style="color:#E02020">{{tableDataCheckList.length}}</span>
        </el-form-item>
        <!-- <el-form-item label="结算比例" :label-width="formLabelWidth">
          <span style="color:#E02020">10%</span>
        </el-form-item> -->
        <el-form-item 
          v-if="!isBatch" 
          label="是否调账:" 
          :label-width="formLabelWidth"
          prop="needAdjust"
        >
          <el-radio v-model="formData.needAdjust" :label='true'>是</el-radio>
          <el-radio v-model="formData.needAdjust" :label='false'>否</el-radio>
        </el-form-item>
        <el-form-item 
          v-if="formData.needAdjust" 
          label="实际分成金额:" 
          :label-width="formLabelWidth" 
          prop="money"
        >
          <el-input style="width: 250px;" v-model="formData.money" placeholder="请输入实际分成金额"></el-input>
        </el-form-item>
        <el-form-item 
          v-if="formData.needAdjust" 
          label="备注:" 
          :label-width="formLabelWidth" 
          prop="money">
          <el-input
            style="width:250px;"
            type="textarea"
            placeholder="请输入调整实际分成金额的原因，且字数不得超过100字"
            maxlength="100"
            v-model="formData.remark"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div 
        class="batchMsg"
        v-else
      >
        <i v-if="batchType === 'success'" class="el-icon-success"></i>
        <i v-else-if="batchType === 'error'" class="el-icon-error"></i>
        <i v-else class="el-icon-time"></i>
        <p>{{batchMessage}}</p>
      </div>
      <span v-if="!batchType && batchType!== 'loading'" slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" v-if="isBatch" @click="batchsettlementBtn()">结算</el-button>
        <el-button type="primary" v-else @click="settlementBtn()">结算</el-button>
      </span>
      <span v-else slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">我知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { 
    batchSettlement,
    settlement 
  } from "@/api/distrib";
  import { formatDate } from "@/utils/validate";
  export default {
    name: "dialogSettles",
    props: {
      tableDataCheckList: {
        // 批量结算数据
        type: Array,
        default: () => []
      },
      row: {
        // 结算数据
        type: Object,
        default: () => {}
      },
      isBatch:{
        type:Boolean,
        default: false
      },
      checkMoney:{
        type:Number,
        default:0
      },
      id:{
        type:String,
        default:0
      }
    },
    data() {
      return {
        centerDialogVisible:false,
        formData: {
          needAdjust: false,
          money: '',
          remark: '',
        },
        minDate:[],
        maxDate:[],
        batchMessage:"结算处理中，请耐心等待…",
        batchType:'',
        formLabelWidth: '120px',
        rules: {
          needAdjust: [
            { required: true, message: "请选择是否调账", trigger: "change" }
          ],
          money: [
            { required: true, message: "请输入实际分成金额", trigger: "change" }
          ],
          money: [
            { required: true, message: "请输入备注", trigger: "change" }
          ],
        }
      }
    },
    watch:{
      centerDialogVisible(val,old){
        if(val){
          this.batchMessage = "结算处理中，请耐心等待…";
          this.batchType = '';
          if(this.isBatch){
            this.minDate = [];
            this.maxDate = [];
            this.tableDataCheckList.forEach(item => {
              this.minDate.push(item.startat);
              this.maxDate.push(item.endat);
            });
            this.minDate.sort();
            this.maxDate.sort();
          }
          console.log(this.tableDataCheckList);
          console.log(this.row)
        }
      }
    },
    created(){
      // console.log(this.tableDataCheckList)
    },
    mounted(){
      // console.log(this.tableDataCheckList)
    },
    computed: {
      dateFormat(){
        return function(date,format){
          if(date){
            return formatDate(new Date(date),format)
          }
        }
      },
    },
    methods: {
      open(){
        this.centerDialogVisible = true;
      },
      colse(){
        this.centerDialogVisible = false;
      },
      // 结算
      settlementBtn() {
        this.$refs.form.validate(valid => {
          if(valid){
            let data = {
              "id": this.row.id,
              "needAdjust": this.formData.needAdjust,
              "money": this.formData.money,
              "remark": this.formData.remark
            };
            settlement(data).then(res => {
              if(res.code === 0){
                this.$message({type:'success',message:'结算完成'});
                this.colse();
                this.$emit('refreshPage',true);
              }else{
                this.$message.error(res.message);
              }
            })
          }
        })
      },
      // 批量结算
      batchsettlementBtn() {
        let data = {
          id:this.id,
          idList:[],
        }
        this.tableDataCheckList.forEach(item => {
          // data.idList.push(item.id.toString());
          data.idList.push(item.id);
        });
        this.batchType = 'loading';
        batchSettlement(data).then(res => {
          if(res.code === 0){
            this.batchType = 'success';
            this.batchMessage = res.message;
          }else{
            this.batchType = 'error';
            this.batchMessage = res.message;
          }
        })
      },
      remove() {},
      inputChange() {}
    }
  };
</script>

<style lang="scss">
.dialog{
  .el-form-item__label,
  .el-form-item__content{
    line-height: 20px;
  }

  .el-dialog__body{
    padding-left: 10px;
  }
  .batchMsg{
    font-size: 14px;
    color: #333;
    text-align: center;
    .el-icon-success{
      font-size: 40px;
      color: #07C160;
      margin-bottom: 20px;
    }
    .el-icon-error{
      font-size: 40px;
      color: #EB3737;
      margin-bottom: 20px;
    }
    .el-icon-time{
      font-size: 40px;
      color: #1183FB;
      margin-bottom: 20px;
    }
  }
}
</style>
